<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form id="my-form">
        <input name="username" placeholder="用户名">
        <input name="password" placeholder="密码">
    </form>
    <div id="captcha-box"></div>


    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="http://static.geetest.com/static/tools/gt.js"></script>
    <script>
        $(function () {
            $.ajax({ 
                // 获取id，challenge，success（是否启用failback）
                    url: "../web/StartCaptchaServlet.php?t=" + (new Date()).getTime(), 
                    // 加随机数防止缓存 
                    type: "get", 
                    dataType: "json", 
                    success: function (data) { // 使用initGeetest接口 // 参数1：配置参数 // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件 
                    initGeetest({ 
                        gt: data.gt, 
                        challenge: data.challenge,
                        product: "popup", 
                            // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效 offline: !data.success // 表示用户后台检测极验服务器是否宕机，与SDK配合，用户一般不需要关注 
                        }, 
                        handlerPopup
                    ); 
                } 
            });
        });
    </script>
</body>

</html>